<template>
  <div>
    <div ref="target" class=" box_echarts w-full h-40"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
let target = ref(null);
let myCharts = null;
// 1.创建DOM实例初始化
onMounted(() => {
  // console.log('儿砸')
  myCharts = echarts.init(target.value);
  renderCharts();
});
// 2.构建OPtions
const renderCharts = () => {
  const options =  {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
  // 3.通过.setOption方法配置对象
  myCharts.setOption(options);
};
// 数据动态变化

// console.log("横向", props.data);
</script>
<style scoped>
.box_echarts{
   
}
</style>
